import {defineComponent, ref, watch, shallowReactive, onMounted, onBeforeUnmount} from 'vue'
// 声明类型
const PropsType = {
  points: {
    type: Array,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props:any){

    // 定义 ref
    const chartRef = ref()

    // 全局变量
    const mapAspectScale = 0.9; //地图长宽比
    const  mapZoom = 1.25; //地图缩放,当前视角的缩放比例
    // const   mapCenter= [104.114129, 37.550339],//当前视角的中心点
    const   mapRoam = true; //地图是否开启平游或缩放,是否开启拖拽漫游（移动和缩放）
    const mapScaleMin = 1.25;// 最小缩放比例,滚轮缩放的极限控制
    const mapScaleMax =10; // 最大缩放比例,滚轮缩放的极限控制
    // 配置项
    let options = shallowReactive({showLegendSymbol: null, tooltip: null, geo: null, series: null})


    // 自定义函数
    const methods = {

      optionsTooltip(){
        return {
          trigger: 'item',
          textStyle: {
            fontSize: 14,
            lineHeight: 22,
          },
          position: point => {
            // 固定在顶部
            return [point[0] + 50, point[1] - 20];
          },
          // 如果需要自定义 tooltip样式，需要使用formatter
          /*
            formatter: params => {
              return `<div style=""> ... </div>`
            }
          */
        }
      },
      optionsGeo(){
        // 底部背景
        return [{
          show: true,
          map: 'china',
          aspectScale: mapAspectScale, //长宽比
          zoom: mapZoom, //缩放,当前视角的缩放比例
          // center: [104.114129, 37.550339],//当前视角的中心点
          roam: mapRoam, //是否开启平游或缩放
          scaleLimit: { //滚轮缩放的极限控制
            min: mapScaleMin, // 最小缩放比例
            max: mapScaleMax // 最大缩放比例
          },
          itemStyle: {
            borderColor: 'rgba(255,209,163, .5)', //区域边框颜色 //708090 004981 ,00508b  ,7ad5ff 008B8B 2F4F4F
            areaColor: 'rgba(73,86,166,.1)', //区域颜色 //#0494e1 #004098 #0083ce #021F49  'rgba(5,21,35,0.1)'
            //shadowOffsetY: 5,
            borderWidth: 0.5, //区域边框宽度
            shadowBlur: 5,
            shadowColor: 'rgba(107,91,237,.7)',
          },emphasis: {
            itemStyle: {
              borderColor: '#FFD1A3', //选中区域边框颜色 '#FFD1A3',
              areaColor: 'rgba(102,105,240,.3)',//选中区域颜色rgb(23, 28, 51); 'rgba(102,105,240,.3)'
              borderWidth: 1,//选中区域边框宽度
              shadowBlur: 5,
              shadowColor: 'rgba(135,138,255,.5)',
            },
          },
          label: {
            formatter: params => `${params.name}`,
            position: 'insideRight',
            fontSize: 16,
            color: '#FFFFFF',
          }
        }]
      },
      optionsSeriesEffectScatter(){
        const scatterData = props.points
        const effectScatter =  {
          type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
          coordinateSystem: 'geo',//这个不能删，删了不显示，该系列使用的坐标系,'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
          silent:false,               //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
          //name:"节点信息",             //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
          effectType: 'ripple',//特效类型，目前只支持涟漪特效'ripple'。
          legendHoverLink:true,       //是否启用图例 hover 时的联动高亮。
          showEffectOn: 'render',//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
          rippleEffect: {//涟漪特效相关配置
            period: 4,//动画的时间，值越小速度越快
            scale: 2.5, //动画中波纹的最大缩放比例，波纹圆环最大限制，值越大波纹越大。
            brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'。
          },
          zLevel: 2,
          //symbol: "circle",//散点图
          symbolSize: 14,//散点大小
          /**
           symbolSize: function (val) { // 涟漪图大小 val就是data中value数组
              return val[2] / 200;
            },
           **/
          label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
            show: true,//省份名显示隐藏
            position: 'right', //省份名显示位置
            /**
             （1）{a}：系列名，series.name。
             （2）{b}：数据名，series.data.name。
             （3）{c}：数据值，series.data.value。
             （4）{d}：百分比。
             （5）{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。
             （6）{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
             字符示例：
             formatter:"{b}：{c}({d}%)"
             */
            formatter: '{b}',// 点的名字
            fontSize: 14,//文字大小
            color: '#fff', // 显示颜色
          },
          tooltip: {
            // 鼠标悬浮显示
            backgroundColor: 'rgba(255,255,255,0.7)',
            formatter: function (param) {
              const value =  param.value;
              // prettier-ignore
              return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 5px;">'
                  + param.name + '</div>'
                  +  'IP地址：' +value[2]+ '<br>';
            }
          },
          itemStyle:{     //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
            color: '#ff5722',//#1a5cd7 ddb926,99FBFE 光圈颜色
            shadowBlur: 5,
            shadowColor: '#fff',
          },
          data: scatterData,
        };
        return effectScatter
      },
      optionsSeries(){
        const series = [];
        const effectScatter =  methods.optionsSeriesEffectScatter()
        if(effectScatter){
          series.push(effectScatter)
        }
        return series
      },
      customElements(){
        const series = methods.optionsSeries()
        options = {
          showLegendSymbol: true,
          tooltip: methods.optionsTooltip(),
          // 底部背景
          geo:  methods.optionsGeo(),
          series: series
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }

      }, clearInterval(timeId) {
        timeId && window.clearInterval(timeId)
      }
    }


    /**
     * 生命周期
     */
    onMounted(() => {
      methods.customElements()
    })

    // 监听
    watch(
        () => props,
        (props) => {
          methods.customElements()
        },
        {
          immediate: true,
          deep: true
        }
    )
    return () => {
      const height = "735px"
      const width = "1150px"
        return <div>
          <echart ref={chartRef} options={options} height={height} width={width}  />
        </div>
    }
  }
})

